<template>
  <div class="home-user">
    <div class="user-top">
      <nav-bar title="个人中心"
               bgColor="transparent"
               :leftShow="false">
        <template #right>
          <img :src="require('@/assets/image/user/position.png')"
               alt="">
        </template>
      </nav-bar>
      <div class="user-info">
        <img :src="require('@/assets/image/default_img.png')"
             alt="">
        <li>
          <span>吃货世界</span>
          <span>ID:33246</span>
        </li>
      </div>
      <div class="user-wallet">
        <li>234.00<br><em>累计收益</em></li>
        <van-divider />
        <li>234.00<br><em>可提现余额</em></li>
        <van-divider />
        <li>2345<br><em>剩余积分</em></li>
      </div>
    </div>
    <div class="user-bottom">
      <div class="user-order">
        <li class="order-top"
            @click="$router.push({path: '/myOrder'})">
          <span>全部订单</span>
          <van-icon name="arrow" />
        </li>
        <div class="order-bottom">
          <li v-for="item in orderItem"
              :key="item.title"
              @click="goMyOrder(item.title)">
            <img :src="item.img"
                 alt="">
            <span>{{ item.title }}</span>
          </li>
        </div>
      </div>
      <div class="user-interests">
        <van-grid :column-num="4"
                  icon-size="0.56rem"
                  :border="false">
          <van-grid-item v-for="item in interestsItem"
                         :key="item.title"
                         :icon="item.img"
                         :text="item.title" />
        </van-grid>
      </div>
      <div class="user-shop">
        <span class="shop-left">我的店铺</span>
        <li class="shop-right">立即申请
          <van-icon name="arrow" />
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import preventBack from '@/mixins/preventBack'
export default {
  data () {
    return {
      orderItem: [
        { img: require('@/assets/image/user/daifukuan.png'), title: '待付款' },
        { img: require('@/assets/image/user/daifahuo.png'), title: '待发货' },
        { img: require('@/assets/image/user/daishouhuo.png'), title: '待收货' },
        { img: require('@/assets/image/user/yiwancheng.png'), title: '已完成' },
        { img: require('@/assets/image/user/shouhou.png'), title: '售后' },
      ],
      interestsItem: [
        { img: require('@/assets/image/user/mingxi.png'), title: '收益明细' },
        { img: require('@/assets/image/user/tixian.png'), title: '收益提现' },
        { img: require('@/assets/image/user/share.png'), title: '我要推广' },
        { img: require('@/assets/image/user/quanyi.png'), title: '权益中心' },
        { img: require('@/assets/image/user/guanzhu.png'), title: '关注店铺' },
        { img: require('@/assets/image/user/collect.png'), title: '收藏' },
        { img: require('@/assets/image/user/shezhi.png'), title: '设置' },
        { img: require('@/assets/image/user/xiaoxi.png'), title: '消息' },
      ]
    };
  },
  components: {
    NavBar
  },
  mixins: [preventBack],
  created () { },
  methods: {
    goMyOrder (type) {
      this.$router.push({ path: `/myOrder/${type}` })
    }
  }
}

</script>
<style lang='scss'>
.home-user {
  @include wh100;
  @include flex-column;
  background-color: #eeeeee;
  .head-navbar {
    .van-nav-bar__right img {
      width: 0.29rem;
      height: 0.35rem;
    }
  }
  .user-top {
    @include bgImgCover('../../assets/image/user/beijing.png');
    height: 4.6rem;
    width: 100%;
    .user-info {
      height: 1.2rem;
      display: flex;
      align-items: center;
      padding: 0 0.35rem;
      img {
        height: 0.95rem;
        width: 0.95rem;
        border-radius: 1rem;
        margin-right: 0.2rem;
      }
      li {
        @include flex-column;
        justify-content: center;
        color: #fff;
        font-size: 0.31rem;
        span {
          &:last-child {
            font-size: 0.26rem;
          }
        }
      }
    }
    .user-wallet {
      @include flex-center;
      color: #fff;
      font-size: 0.3rem;
      li {
        margin: 0.2rem 0.1rem;
        text-align: center;
        line-height: 0.4rem;
        em {
          font-size: 0.26rem;
        }
      }
      .van-divider {
        width: 0.4rem;
        transform: rotate(90deg);
      }
    }
  }
  .user-bottom {
    box-sizing: border-box;
    transform: translateY(-0.6rem);
    flex: 1;
    width: 100%;
    padding: 0 0.2rem;
    .user-order {
      width: 100%;
      height: 2rem;
      background-color: #ffffff;
      border-radius: 0.1rem;
      box-sizing: border-box;
      padding: 0.2rem 0.35rem 0.2rem 0.2rem;
      @include flex-column;
      .order-top {
        display: flex;
        justify-content: space-between;
      }
      .order-bottom {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex: 1;
        margin-top: 0.2rem;
        li {
          height: 100%;
          @include flex-column;
          justify-content: space-around;
          align-items: center;
          img {
            width: 0.4rem;
            height: 0.4rem;
          }
        }
      }
    }
    .user-interests {
      margin-top: 0.2rem;
      border-radius: 0.1rem;
      overflow: hidden;
      .van-grid-item__content {
        padding: 0.32rem 0.16rem 0.16rem;
        .van-grid-item__icon + .van-grid-item__text {
          margin-top: 0.32rem;
        }
      }
    }
    .user-shop {
      margin-top: 0.3rem;
      padding: 0 0.2rem;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .shop-left {
        font-weight: bold;
        font-size: 0.26rem;
      }
      .shop-right {
        @include flex-center;
        color: #666;
        .van-icon {
          margin-left: 0.15rem;
        }
      }
    }
  }
}
</style>